import React,{useState} from "react";
import {Card,Spin,Input,Button,message} from 'antd';
import {UserOutlined,SecurityScanOutlined} from '@ant-design/icons';
import axios from 'axios';
import servicePath from "../../config/apiUrl";
const {loginAPI} = servicePath;

export default function Login(props) {
    const [userName,setUserName] = useState('');
    const [password,setPassword] = useState('');
    const [isLoading,setIsLoading] = useState(false);

    const {setIsLogined} = props;
    
    

    const checkLogin = ()=>{
        setIsLoading(true);
        if(!userName){
            message.error('用户名不能为空')
            setTimeout(()=>{
              setIsLoading(false)
            },1000)
            return false
        }else if(!password){
            message.error('密码不能为空')
            setTimeout(()=>{
              setIsLoading(false)
            },1000)
            return false
        }
        const dataProps = {
            'userName':userName,
            'password':password
        }
        

        axios({
            method:'post',
            url:loginAPI,
            data:dataProps,
            withCredentials: true,
    
        }).then(
           res=>{
                setIsLoading(false)
                console.log(res);
                if(res.data.data==='登录成功'){
                    localStorage.setItem('openId',res.data.openId)
                    console.log('----登陆成功');
                    setIsLogined(true);
                    
                }else{
                    message.error('用户名密码错误');
                }
           }
        )
    
        setTimeout(()=>{
            setIsLoading(false);
        },1000)
      }



    return (

        <>

            <div className="login_page" >

                <div className="login-div">

                    <Spin tip="Loading..." spinning={isLoading}>

                        <Card title="Hotpot-blog Manage System" bordered={true} style={{width:400}} >

                            <Input 
                                id="userName"
                                size="large"
                                placeholder="Enter your userName"
                                prefix={<UserOutlined />}
                                onChange={(e) => {setUserName(e.target.value)}}
                            />
                            <br/>
                            <br/>
                            <Input.Password 
                                id="password"
                                size="large"
                                placeholder="Enter your pasword"
                                prefix={<SecurityScanOutlined />}
                                onChange={(e) => {setPassword(e.target.value)}}
                            />
                            <br/>
                            <br/>
                            <Button type="primary" size="large" block onClick={checkLogin}>Log in</Button>
                        </Card>

                    </Spin> 
                </div>
            </div>
        </>
    )
}

